import Vue from "vue";
import Vuex from "vuex";
// 导入user子模块
import user from "./modules/user";
// 导入global子模块
import global from "./modules/gloabl";

Vue.use(Vuex);

// 导出仓库实例
export default new Vuex.Store({
    // vuex的核心（5个）

    // 状态（里面放的就是需要被大规模管理的东西：需要共享的数据）
    // 对于数据的格式没有什么要求，里面可以放很多
    state: {
        // 在这里来声明项目中需要使用的状态的初始值
        // 此处state有点data的意思，但是存在区别：
        // data是给组件用的，并且是当前的组件；而vuex的state是全局的，给整个项目用的。
        username: "张三",
        age: 22,
        // 后续如果有需要可以接着写....
    },

    // 里面放的是修改state的方法(同步)
    // 方法要求俩个形参（至少1个）
    //      形参1: state
    //      形参2: 影响state修改的数据
    mutations: {
        // 修改用户名的方法
        setUserName(state, name) {
            state.username = name;
        },
        // 修改年龄的方法（异步）
        setAge(state, age) {
            setTimeout(() => {
                state.age = age;
            }, 50000);
        },

        // 异步实现年龄的修改，与之对应的同步代码
        setAgeSync(state, payload) {
            state.age = payload;
        },
    },

    // 里面放的是修改state的方法(异步)
    // 方法要求俩个形参（至少1个）
    //      形参1: context对象(上下文对象 -> store对象)，因为异步actions里的方法并不会真的自己去改数据，而是调用mutations里的方法进行数据的修改
    //      形参2：影响state修改的数据
    actions: {
        // 异步修改年龄
        setAgeAsync(context, payload) {
            // 此处context对象其实就是store对象，actions中的方法不负责数据的更改，而是调用mutations中的方法来实现数据更改的，因此，actions中的数据修改方法，必须对应一个mutations中的数据修改方法
            setTimeout(() => {
                context.commit("setAgeSync", payload);
            }, 5000);
        },
    },

    // 数据的装饰/加工工厂，对于数据的格式上的输出处理
    // 方法要求一个形参：state
    // 得有return语句
    // 其与state的关系，有点类似于单文件组件中的data与computed之间的关系
    getters: {
        // 用户年龄的处理
        dealAge(state) {
            return `用户今年是${state.age}岁，明年就是${state.age + 1}岁`;
        },
        // ...
    },

    // 模块化对象
    modules: {
        // 应用子模块
        user,       // user:user,  【模块名:值】
        global,     // global:global  【模块名:值】
        // ...
    },
});
